<template>
  <div class="swiper-page">
    <van-swipe class="my-swipe" :autoplay="3000" lazy-render>
        <van-swipe-item v-for="item in swiperList" :key="item.bannerId">
            <img :src="item.pic" />
        </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script setup>
import { getBanner } from '@/api/home'
import { ref, onMounted } from 'vue'
const swiperList = ref([])
// 获取轮播图列表
const getSwiperList = async () => {
  try {
    const { data } = await getBanner(2) // 2表示获取iphone轮播图列表
    swiperList.value = data.banners
  } catch (error) {
    alert(error)
  }
}
onMounted(() => {
  getSwiperList()
})
</script>

<style lang="scss" scoped>
.swiper-page {
  .van-swipe {
    margin-top: .4rem;
    border-radius: .3rem;
  }
  .van-swipe-item {
    height: 3rem;
    img {
      width: 100%;
      height: 3rem;
    }
  }
}
</style>
